<template>
  <div class="app">
    <h2>Sum: {{ sum }}</h2>
    <h2>Name: {{ person.name }}</h2>
    <h2>Age: {{ person.age }}</h2>
    <h2>Car Info: {{ car }}</h2>
    <button @click="changeSum">sum + 1</button>
    <button @click="changeName">change name</button>
    <button @click="changeAge">change age</button>
    <button @click="changePerson">change person</button>
    <button @click="changeBrand">chang brand</button>
    <button @click="changeColor">chang color</button>
    <button @click="changeEngine">chang engine</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import { ref, shallowRef, reactive, shallowReactive } from 'vue';

  let sum = shallowRef(0)
  let person = shallowRef({
    name:'Aphasia',
    age: 22
  })
  let car = shallowReactive({
    brand: 'Banz',
    options: {
      color: 'red',
      engine: 'V8'
    }
  })

  function changeSum() {
    sum.value += 1
  }

  function changeName() {
    person.value.name = 'dasdf'
  }
  function changeAge() {
    person.value.age += 1
  }

  function changePerson() {
    person.value = {name: 'tom', age:100}
  }
  
  function changeBrand() {
    car.brand = 'Bmw'
  }

  function changeColor() {
    car.options.color = 'blue'
  }

  function changeEngine() {
    car.options.engine = 'V12'
  }
</script>

<style scoped>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px
  }
  button {
    margin: 5px;
  }
</style>